<template>
  <div class="service-provider">
    <!-- 服务商查询表单-->
    <div class="search">
      <div class="title">服务商列表</div>
      <el-form :inline="true" :model="searchForm" label-width="120px" class="demo-form-inline" size="mini"
               ref="search">
        <el-form-item label='服务商id' prop="ser_id">
          <el-input v-model="searchForm.ser_id" placeholder="请填入数字"
                    oninput="if(isNaN(value)){value=value.replace(/[^0-9]/g,'')}"></el-input>
        </el-form-item>
        <el-form-item label='账号名' prop="ser_name">
          <el-input v-model="searchForm.ser_name"></el-input>
        </el-form-item>
        <el-form-item label='手机号码' prop="ser_phone">
          <el-input v-model="searchForm.ser_phone"></el-input>
        </el-form-item>
        <el-form-item label='企业名称' prop="ser_cname">
          <el-input v-model="searchForm.ser_cname"></el-input>
        </el-form-item>
        <el-form-item label="账号状态" prop="ser_status">
          <el-select v-model="searchForm.ser_status" >
            <el-option label="全部" value=""></el-option>
            <el-option label="正常" :value="1"></el-option>
            <el-option label="冻结" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="resetForm('search')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-row>
      <!--    新增服务商按钮-->
      <el-button type="primary" @click="showAddDialog" size="mini">新增</el-button>
      <!--    导出功能-->
      <el-button type="primary" @click="exportExcel" size="mini">导出</el-button>
    </el-row>

    <!--   服务商列表-->
    <el-table
      :data="showTableData"
      stripe
      style="width: 100%"
      size="mini"
      id="providerTable">
      <el-table-column
        type="index"
        width="50"
        label="#">
      </el-table-column>
      <el-table-column
        prop="ser_id"
        label="服务商id">
      </el-table-column>
      <el-table-column
        prop="ser_name"
        label="账号名">
      </el-table-column>
      <el-table-column
        prop="ser_cname"
        label="企业名称">
      </el-table-column>
      <el-table-column
        prop="ser_phone"
        label="电话号码">
      </el-table-column>
      <el-table-column
        prop="ser_email"
        label="邮箱">
      </el-table-column>
      <el-table-column
        prop="ser_address"
        label="办公地址">
      </el-table-column>
      <el-table-column
        prop="ser_re_address"
        label="注册地址">
      </el-table-column>
      <el-table-column
        prop="ser_type"
        label="公司类型">
        <template slot-scope="scope">
          <span v-if="scope.row.ser_type==1">无限公司</span>
          <span v-else-if="scope.row.ser_type==2">有限责任公司</span>
          <span v-else-if="scope.row.ser_type==3">两合公司</span>
          <span v-else-if="scope.row.ser_type==4">股份有限公司</span>
          <span v-else>股份两合公司</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="ser_delegate"
        label="法定代表人">
      </el-table-column>
      <el-table-column
        prop="ser_money"
        label="注册资本">
      </el-table-column>
      <el-table-column
        prop="ser_status"
        label="账号状态">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.ser_status==1">正常</el-tag>
          <el-tag type="info" v-else>冻结</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="ser_time"
        label="注册时间"
        width="95px"
        sortable>
      </el-table-column>
      <el-table-column label="操作" width="300px">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="updateProviderClick(scope.row)">编辑</el-button>
          <el-button type="primary" size="mini" @click="deleteProvider(scope.row)">删除</el-button>
          <el-button type="primary" size="mini" @click="toggleState(scope.row)">{{scope.row.ser_status==1 ? "冻结" : "解冻"}}</el-button>
          <el-button type="primary" size="mini" @click="resetPassword(scope.row)">重置密码</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--      分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <!--    增加服务商对话框-->
   <add-service-provider :addDialogVisible="addDialogVisible" @addDialogClosed="addDialogClosed"
   @afterAddingProvider="afterAddingProvider"></add-service-provider>
<!--    编辑服务商对话框-->
    <update-service-provider :updateDialogVisible="updateDialogVisible" :updateProviderData="updateProviderData"
    @afterUpdatingProvider="afterUpdatingProvider" @closeUpdateDialog="closeUpdateDialog"></update-service-provider>
  </div>
</template>

<script>
import AddServiceProvider from "@/views/business/user/AddServiceProvider";
import {getServiceByKey,updateServiceSideStatus,resetSerPassword,deleteService} from '@/network/business/serviceProvider';
import UpdateServiceProvider from "@/views/business/user/UpdateServiceProvider";
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import {formatDate} from "@/common/utils";

export default {
  name: "ServiceProvider",
  components: {UpdateServiceProvider, AddServiceProvider},
  computed:{
    total(){ //总条数
      return this.tableData.length;
    }
  },
  created(){
    this.getProviderListFromServe();
  },
  data(){
    return{
      updateDialogVisible:false, //编辑服务商对话框
      addDialogVisible: false,  //增加服务商对话框的显示开关
      pageSizeTemp:0,  //页面大小的副本
      currentPageTemp:0,  //当前页面的副本
      currentPage: 1,  //当前页面
      pageSize:5,  //页面条数，默认为10条
      updateProviderData: {},  //传入”编辑“的参数
      searchForm:{     //查询服务商表单
        ser_id:'' ,  //账号id
        ser_name:'',  //账号名
        // realName:'', //真实名
        ser_phone:'',   //手机号码
        ser_cname:'',  //企业名称
        ser_status:''//账号状态 0冻结 1正常
      },
      showTableData:[],  //根据分页显示的页面
      tableData:[],  //从数据库中获取的服务商列表
    }
  },
  methods:{
    getProviderListFromServe(){  //从后台中获取服务商表单
      this.currentPage = 1; //每次请求时都设置为第一页
      getServiceByKey(this.searchForm).then(res=>{
        this.tableData = res.data;
        this.getTableData();  //提取相应的数据显示在表格中
      })
    },
    //显示所有数据
    showAllData(){
      this.pageSizeTemp = this.pageSize;
      this.currentPageTemp = this.currentPage;
      this.pageSize = this.tableData.length;
      this.currentPage = 1;
      this.getTableData();
    },
    //还原当前数据
    resetData(){
      this.currentPage = this.currentPageTemp;
      this.pageSize = this.pageSizeTemp;
      this.getTableData();
    },
    //导出excel
    exportExcel(){
      this.showAllData();
      this.$nextTick(function(){
        //关联节点
        let wb = XLSX.utils.table_to_book(document.querySelector("#providerTable"));
        let wbOut = XLSX.write(wb,{bookType:'xlsx', bookSST:true, type:'array'});
        try{
          let time = formatDate(new Date(), "yyyy-MM-dd");
          FileSaver.saveAs(new Blob([wbOut],{type:'application/octet-stream'}),`${time}-服务商信息.xlsx`);
        }catch (e){
          if(typeof console !== 'undefined'){
            console.log(e,wbOut);
          }
        }
        //表格还原
        this.resetData();
        return wbOut;
      })
    },
    deleteProvider(provider){  //删除服务商
      this.$confirm(`${provider.ser_name}服务商会被永久删除,是否继续?`,'提示',{
        confirmButtonText:'确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        deleteService(provider.ser_id).then(res=>{
          if(res.data.status==200){
            this.$message.success(`${provider.ser_name}服务商删除成功！`);
            this.getProviderListFromServe();
          }
          if(res.data.status==500){
            this.$message.error(`${provider.ser_name}服务商删除失败！`)
          }
        })
      }).catch(()=>{
        return this.$message('已取消删除！');
      })
    },
    toggleState(provider){  //解冻、冻结服务商账号
      updateServiceSideStatus(provider.ser_id).then(res=>{
        if(res.data.status==200){
          provider.ser_status = provider.ser_status==1 ? 0 : 1;
          if(provider.ser_status==1){
            this.$message.success(provider.ser_name+"服务商解冻成功！");
          }
          else{
            this.$message.success(provider.ser_name+"服务商冻结成功！");
          }
        }else{
          this.$message.error(`${provider.ser_name}服务商账号状态修改失败！`);
        }
      })
    },
    resetPassword(provider){  //重置密码
      this.$confirm(`确认重置${provider.ser_name}服务商的密码吗？`,'提示',{
        confirmButtonText:'确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        resetSerPassword(provider.ser_id).then(res=>{
          if(res.data.status==200){
            return this.$message.success(`${provider.ser_name}服务商的密码重置成功！`);
          }
          else{
            return this.$message.error(`${provider.ser_name}服务商的密码重置失败！`);
          }
        })
      }).catch(()=>{
        return this.$message('已取消重置密码！');
      })
    },
    resetForm(formName){    //重置查询表单
      this.$refs[formName].resetFields();
      this.getProviderListFromServe();
    },
    onSubmit(){  //查询
      this.getProviderListFromServe();
    },
    showAddDialog() { //点击添加按钮
      this.addDialogVisible = true;
    },
    addDialogClosed(){  //关闭“添加服务商”对话框
      this.addDialogVisible =false;
    },
    //成功添加服务商后
    afterAddingProvider(){
      this.addDialogVisible = false;
      this.getProviderListFromServe();
    },
    //点击编辑按钮
    updateProviderClick(provider){
      this.updateDialogVisible = true;
      this.updateProviderData = provider;
    },
    closeUpdateDialog(){
      this.updateDialogVisible =false;
    },
    //成功编辑服务商信息后
    afterUpdatingProvider() {
      this.updateDialogVisible = false;
      this.getProviderListFromServe();
    },

    //分页
    handleSizeChange(val){  //每页条数变化
      this.pageSize =val;
      this.getTableData();
    },
    handleCurrentChange(val){  //当前页发生改变
      this.currentPage = val;
      this.getTableData();
    },
    getTableData(){  //获取数据
      let startIndex = (this.currentPage-1)*this.pageSize;
      let endIndex = startIndex+this.pageSize > this.tableData.length ? this.tableData.length : startIndex+this.pageSize;
      this.showTableData = this.tableData.slice(startIndex,endIndex);
    }
  }
}
</script>

<style scoped>
.search{
  border: 1px solid #999999;
  border-radius: 3px;
  margin-bottom: 10px;
}
.title{
  color: white;
  background-color: rgb(55,75,118);
  font-size: 12px;
  height: 25px;
  line-height: 25px;
  padding-left:8px;
  margin-bottom: 10px;
}
</style>
